import { Input, Picker, View } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import { useUpdateEffect } from "ahooks";

import TagRadioGroup from "@/components/app/TagRadioGroup";
import ByButton from "@/components/ui/ByButton";
import Card from "@/components/common/Card";
import ByIcon from "@/components/ui/ByIcon";

import useFetch from "@/hooks/useFetch";
import useForm from "@/hooks/useForm";
import ApiCrm from "@/api/crm";
import ApiMokan from "@/api/mokan";

const options = [
  { label: "施工", value: true },
  { label: "不施工", value: false },
];

export default () => {
  const { params } = useRouter();
  const intentCustomerId = Number(params.intentCustomerId);

  const { data } = useFetch<any>(ApiCrm.customerDetail, {
    defaultParams: [{ intentCustomerId }],
  });

  const { loading, model, setModel, submit } = useForm<{
    intentCustomerId: number;
    serialNumber: number | string;
    isHoliday: boolean;
    realStartDate: string;
    planDays: number | ""
  }>(ApiMokan.bindDevice, {
    defaultModel: { intentCustomerId, serialNumber: "", planDays: "" },
    rules: {
      realStartDate: { required: true, message: "请选择开工日期" },
      serialNumber: { required: true, message: "请输入设备串号" },
      planDays: { required: true, message: "请输入工期" },
      isHoliday: { required: true, message: "请选择节假日是否开工" },
    },
    onSuccess() {
      Taro.showToast({ title: "绑定成功" });
      setTimeout(() => {
        Taro.redirectTo({ url: `monitor?intentCustomerI=` + intentCustomerId });
      }, 1500);
    },
  });

  useUpdateEffect(() => {
    const serialNumber = data?.intentCustomer.MKNo;
    serialNumber && setModel({ serialNumber });
  }, [data]);

  return (
    <>
      <Card className="m-4">
        <View className="mb-2 text-sm text-second">实际开工日期</View>
        <Picker
          mode="date"
          value={model.realStartDate ?? ""}
          onChange={(e) => setModel({ realStartDate: e.detail.value })}
        >
          <View className="mb-4 flex border-1 border-line-light rounded-md items-center px-3">
            <Input
              value={model.realStartDate}
              className="flex-auto h-[82px]"
              placeholder="选择开工时间"
              disabled
            />
            <ByIcon name="Calendar" />
          </View>
        </Picker>

        <View className="mb-2 text-sm text-second">设备串号</View>
        <View className="mb-4 flex border-1 border-line-light rounded-md items-center px-3">
          <Input
            value={model.serialNumber + ""}
            className="flex-auto h-[82px]"
            placeholder="设备串号"
            onInput={(e) => setModel({ serialNumber: e.detail.value })}
          />
        </View>

        <View className="mb-2 text-sm text-second">工期</View>
        <View className="mb-4 flex border-1 border-line-light rounded-md items-center px-3">
          <Input
            type="number"
            value={model.planDays + ""}
            className="flex-auto h-[82px]"
            placeholder="工期"
            onInput={(e) => setModel({ planDays: e.detail.value ? Number(e.detail.value) : '' })}
          />
        </View>

        <View className="mb-2 text-sm text-second">节假日施工</View>
        <View className="mb-4">
          <TagRadioGroup
            value={[model.isHoliday]}
            options={options}
            valueKey="value"
            onChange={([e]) => setModel({ isHoliday: e })}
          />
        </View>
      </Card>

      <ByButton
        size="large"
        className="w-2/3 mt-6"
        loading={loading}
        onClick={() => submit()}
      >
        绑定摄像头
      </ByButton>
    </>
  );
};
